<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
	<title>jQuery plugin: Tablesorter 2.0 - Column Math Widget</title>

	<!-- jQuery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

	<!-- Demo stuff -->
	<link rel="stylesheet" href="../docs/css/jq.css">
	<link href="../docs/css/prettify.css" rel="stylesheet">
	<script src="../docs/js/prettify.js"></script>
	<script src="../docs/js/docs.js"></script>

	<!-- Tablesorter: required -->
	<link rel="stylesheet" href="../css/theme.blue.css">
	<script src="../js/jquery.tablesorter.js"></script>

	<script src="widget-column-math.js"></script>

	<style>
	.align-decimal { width: 85px; text-align: right; }
	</style>

	<script id="js">$(function() {

	// call the tablesorter plugin and assign widgets with id "zebra" (Default widget in the core) and the newly created "repeatHeaders"
	$("table").tablesorter({
		theme: 'blue',
		widgets: ['zebra', 'column-math'],
		widgetOptions: {
			columnMath_data   : 'math', // data-math attribute
			columnMath_format : {
				// would prefer to just use a formatting mask instead of all these options, something like: "$ #,###.00"
				output_prefix       : '$ ',
				output_suffix       : '',
				thousands_separator : ',',
				thousands_grouping  : 3,
				decimal_separator   : '.',
				decimal_places      : 2,
				format_complete     : null // function(number, $cell){ return number; }
			}
		}
	});

});</script>
</head>
<body>

<div id="banner">
	<h1>table<em>sorter</em></h1>
	<h2>Column Math Widget</h2>
	<h3>Flexible client-side table sorting</h3>
	<a href="index.html">Back to documentation</a>
</div>

<div id="main">

		<p class="tip">
			<em>NOTE!</em>
			<ul>
				<li>This is an attempt to generalize <a href="http://jsfiddle.net/Mottie/vCTHw/729/">this demo</a>.</li>
				<li>It still needs a LOT of work (incomplete functionality).</li>
			</ul>
		</p>

	<h1>Demo</h1>

<div id="demo"><table class="sortable">
	<thead>
		<tr>
			<th class="sorter-false">Region</th>
			<th>Salesman</th>
			<th>FastCar</th>
			<th>RapidZoo</th>
			<th>SuperGlue</th>
			<th>Grand Total</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="2">Column Totals</td>
			<td data-math="sumcol"></td>
			<td data-math="sumcol"></td>
			<td data-math="sumcol"></td>
			<td data-math="sumcol" data-math-target="[data-math]"></td>
		</tr>
		<tr>
			<td colspan="5">Grand Total</td>
			<td data-math="sumall"></td>
		</tr>
	</tfoot>

	<tbody>
		<tr>
			<td class="block">Middle</td>
			<td>Joseph</td>
			<td>$ 3,623</td>
			<td>$ 4,782</td>
			<td>$ 7,055</td>
			<td data-math="sumrow"></td>
		</tr>
		<tr>
			<td class="block">Middle</td>
			<td>Lawrence</td>
			<td>$ 5,908</td>
			<td>$ 4,642</td>
			<td>$ 4,593</td>
			<td data-math="sumrow"></td>
		</tr>
		<tr>
			<td class="block">Middle</td>
			<td>Maria</td>
			<td>$ 6,502</td>
			<td>$ 3,969</td>
			<td>$ 5,408</td>
			<td data-math="sumrow"></td>
		</tr>
		<tr>
			<td class="block">Middle</td>
			<td>Matt</td>
			<td>$ 4,170</td>
			<td>$ 6,093</td>
			<td>$ 5,039</td>
			<td data-math="sumrow"></td>
		</tr>
	</tbody>

	<tbody class="tablesorter-infoOnly">
		<tr>
			<td colspan="2">Middle Total</td>
			<td data-math="sumabove"></td>
			<td data-math="sumabove"></td>
			<td data-math="sumabove"></td>
			<td data-math="sumabove" data-math-target="[data-math]"></td>
		</tr>
	</tbody>

	<tbody>
		<tr>
			<td class="block">North</td>
			<td>Joseph</td>
			<td>$ 3,643</td>
			<td>$ 5,846</td>
			<td>$ 6,574</td>
			<td data-math="sumrow"></td>
		</tr>
		<tr>
			<td class="block">North</td>
			<td>Lawrence</td>
			<td>$ 4,456</td>
			<td>$ 6,658</td>
			<td>$ 7,685</td>
			<td data-math="sumrow"></td>
		</tr>
		<tr>
			<td class="block">North</td>
			<td>Maria</td>
			<td>$ 6,235</td>
			<td>$ 4,616.99</td>
			<td>$ 3,612.33</td>
			<td data-math="sumrow"></td>
		</tr>
		<tr>
			<td class="block">North</td>
			<td>Matt</td>
			<td>$ 3,868</td>
			<td>$ 3,926</td>
			<td>$ 3,254</td>
			<td data-math="sumrow"></td>
		</tr>
	</tbody>

	<tbody class="tablesorter-infoOnly">
		<tr>
			<td colspan="2">North Total</td>
			<td data-math="sumabove"></td>
			<td data-math="sumabove"></td>
			<td data-math="sumabove"></td>
			<td data-math="sumabove" data-math-target="[data-math]"></td>
		</tr>
	</tbody>

	<tbody>
		<tr>
			<td class="block">West</td>
			<td>Joseph</td>
			<td>$ 5,507</td>
			<td>$ 5,186</td>
			<td>$ 4,882</td>
			<td data-math="sumrow"></td>
		</tr>
		<tr>
			<td class="block">West</td>
			<td>Lawrence</td>
			<td>$ 4,082</td>
			<td>$ 5,272</td>
			<td>$ 6,124</td>
			<td data-math="sumrow"></td>
		</tr>
		<tr>
			<td class="block">West</td>
			<td>Maria</td>
			<td>$ 5,520</td>
			<td>$ 5,461</td>
			<td>$ 4,872</td>
			<td data-math="sumrow"></td>
		</tr>
		<tr>
			<td class="block">West</td>
			<td>Matt</td>
			<td>$ 6,737</td>
			<td>$ 4,598</td>
			<td>$ 4,233</td>
			<td data-math="sumrow"></td>
		</tr>
	</tbody>

	<tbody class="tablesorter-infoOnly">
		<tr>
			<td colspan="2">West Total</td>
			<td data-math="sumabove"></td>
			<td data-math="sumabove"></td>
			<td data-math="sumabove"></td>
			<td data-math="sumabove" data-math-target="[data-math]"></td>
		</tr>
	</tbody>

</table></div>

	<h1>Javascript</h1>

	<div id="javascript">
		<pre class="prettyprint lang-javascript"></pre>
	</div>

	<h1>HTML</h1>
	<div id="html">
		<pre class="prettyprint lang-html"></pre>
	</div>

</div>

</body>
</html>

